<template>
  <!-- Login page -->
  <div class="login-page">
    <div class="login-container">
      <h2>Login</h2>
      <div class="input-group">
        <label for="username">用户名:</label>
        <input
          type="text"
          id="username"
          placeholder="请输入用户名"
          v-model="username"
        />
      </div>
      <div class="input-group">
        <label for="password">密码:</label>
        <input
          type="text"
          id="password"
          placeholder="请输入密码"
          v-model="password"
        />
      </div>
      <button class="login-button" @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5'
export default {
  name: 'HomeView',
  data() {
    return {
      username: 'czl',
      password: 'leo666999',
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    login() {
      this.$axios.auth({
          grant_type: 'password',
          username: this.username,
          password: md5(this.password)
      }).then(data => {
        console.log(data)
        alert('登录成功')

        this.$axios({
          method: 'GET',
          url: '/users/info'
        }).then(data => {
          console.log(data)
        })
      }).catch(err => {
        console.log(err)
        alert(err.data.error_description)
      })
    }
  },
}
</script>
<style scoped>
/* @import url(); 引入css类 */
/* Login page styles */
.login-page {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
}

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 100vh;
}

.input-group {
  margin-bottom: 10px;
}

input[type='text'] {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.login-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.login-button:hover {
  background-color: #0069d9;
}
</style>